import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import router from 'umi/router';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import { Button, Card } from 'antd';

import '@ant-design/compatible/assets/index.css';
import BasicInfoElem from './components/BasicInfoElem';

interface VIPUserManagementSaveAndEditProps extends FormComponentProps {
  dispatch: Dispatch;
  dataInfo: any;
  INITINFO: any;
  location: { query: any };
}

@connect(({
  VIPUserManagementSaveAndEdit: { dataInfo },
}: any) => ({
  dataInfo,
}))
class VIPUserManagementSaveAndEditInfo extends Component<VIPUserManagementSaveAndEditProps> {
  componentDidMount() {
    const {
      location: { query: { id } },
    } = this.props;
    if (id) this.fetchDetailInfo(id);

    this.fetchAction('common/fetchAddressList');
  }

  componentDidUpdate(props: any) {
    const {
      location: { query: { id } },
    } = this.props;
    if (id && id !== props.location.query.id) this.fetchDetailInfo(id);
  }

  componentWillUnmount() {
    this.fetchAction('clear');
  }

  fetchDetailInfo = (id: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'VIPUserManagementSaveAndEdit/fetch',
      payload: { id, loadUser: 1 },
    });
  };

  handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const { form: { validateFieldsAndScroll } } = this.props;
    validateFieldsAndScroll((errors, values) => {
      if (errors) return;

      const params = {
        ...values,
        areaCode: values.areaGrop[2],
      };

      const { location: { query } } = this.props;
      if (query) {
        const { id } = query;
        params.id = id;
      }
      delete params.areaGrop;
      this.fetchAction('saveOrUpdate', params);
    });
  };

  fetchAction = (typeName: string, payload = {}) => {
    const type = typeName.indexOf('common') >= 0
      ? typeName : `VIPUserManagementSaveAndEdit/${typeName}`;
    const { dispatch } = this.props;
    dispatch({ type, payload });
  };

  render() {
    const { form, dataInfo = {} } = this.props;
    return (
      <Fragment>
        <PageHeader />

        <Card title="编辑基本信息" bordered={false}>
          <Form
            hideRequiredMark
            onSubmit={this.handleSubmit}
            className="tableListForm"
          >
            <BasicInfoElem
              forms={form}
              detailInfo={dataInfo}
            />

            <Button
              type="primary"
              htmlType="submit"
            >
              保存
            </Button>
            <Button
              ghost
              type="primary"
              className="marginL16"
              onClick={() => router.goBack()}
            >
              取消
            </Button>
          </Form>
        </Card>
      </Fragment>
    );
  }
}

export default Form.create<VIPUserManagementSaveAndEditProps>()(VIPUserManagementSaveAndEditInfo);
